<template>
  <view class="sort-bar-i" @click="onTitleClick">
    <view :class="[open ? 'sort-bar-icolor' : '']">
      {{ title }}
      <u-badge type="primary" size="mini" :absolute="false" :count="chooseTypeNum"></u-badge>
    </view>
    <u-icon
      v-if="open"
      name="arrow-up-fill"
      color="#2F86F6"
      size="14"
    ></u-icon>
    <u-icon
      v-else
      name="arrow-down-fill"
      color="#909399"
      size="14"
    ></u-icon>
  </view>
</template>
<script>
  export default {
    props: {
      open: Boolean,
      title: String,
      dictList: {
        type: Object,
        default: () => {}
      }
    },
    computed: {
      chooseTypeNum() {
        let num = 0
        for(var k in this.dictList) {
          let list = this.dictList[k]
          let chooseNumber = list.filter(item => item.choose).length
          num += chooseNumber
        }

        return num
      }
    },
    methods: {
      onTitleClick() {
        this.$emit('onTitleClick')
      }
    }
  }

</script>

<style lang="scss" scoped>
.sort-bar-i {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 40rpx;
  view:nth-child(1) {
    font-size: 24rpx;
    color: #212329;
    font-weight: 700;
    margin-right: 3rpx;
  }
  .sort-bar-icolor {
    color: #2f86f6 !important;
  }
}
</style>
